<template>
	<view class="page-view">
		<nav-view :defaultShow="true"></nav-view>
		<view class="page-conte">
			<view class="title-h2">
				<image class="icon" src="../../static/images/title-ss.png" mode=""></image>
			</view>
			<view class="search-view-box">
				<view class="search-top-box is-flex">
					<i class="iconfont icon-jindunlogo-01"></i>
					<text class="name">金盾</text>
				</view>
				<view class="search-conte-box is-flex">
					<i class="iconfont icon-sousuo-01"></i>
					<input class="input" type="text" v-model="keywords" placeholder="请描述您的法律问题" @input="onInput">
					<view class="search-btn" v-if="showSearchList" @click="doSearch()">搜索</view>
				</view>
			</view>
			<!-- 搜索引导 -->
			<view class="search-list" v-if="showSearchList">
				<view class="search-item is-flex" v-for="(item,index) in searchList" :key="index" @click="touchSearch(item)">
					<i class="iconfont icon-sousuo-01"></i>
					<text class="conte u-line-1">{{item.article_title}}</text>
					<i class="iconfont icon-tiaozhuan-01"></i>
				</view>
			</view>
			<!-- 历史搜索 -->
			<view class="history-search-box" v-if="!showSearchList">
				<view class="title-view-box is-flex">
					<image class="title" src="../../static/images/title-lsss.png" mode=""></image>
					<image class="delete" src="../../static/images/icon-delete.png" mode="" @click="touchDelete"></image>
				</view>
				<view class="history-list-box">
					<view class="history-item is-flex" v-for="(item,index) in cacheList" :key="index">
						<text class="conte" @click="touchSearch(item)">{{item.article_title}}</text>
						<image class="close" src="../../static/images/icon-close.png" mode=""  @click="delCacheList(index)"></image>
					</view>
				</view>
				<view class="title-view-box is-flex">
					<image class="title" src="../../static/images/title-ssph.png" mode=""></image>
				</view>
				<view class="ph-view-box">
					<u-tabs :list="tabList" lineColor="#f56c6c" lineWidth="40" @click="click" 
					:activeStyle="{
						color: '#333333',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#666666',
						transform: 'scale(1)'
					}"></u-tabs>
					
					<view v-for="(item,index) in tabList" :key="index" v-if="item.category_id == tabId">
						<view class="ph-list-box">
							<view class="ph-item is-flex" v-for="(item1,index1) in item.searchList" :key="index1" @click="touchSearch(item1)">
								<i class="t-icon t-icon-sousuo-remen1-01" v-if="index1 == 0"></i>
								<i class="t-icon t-icon-sousuo-remen2-01" v-else-if="index1 == 1"></i>
								<i class="t-icon t-icon-sousuo-remen3-01" v-else-if="index1 == 2"></i>
								<text class="num" v-else>{{index1 + 1}}</text>
								<text class="tt">{{item1.article_title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<u-modal :show="show" :content='content' :showConfirmButton="false" :closeOnClickOverlay="true" >
			<view class="modal-box">
				<view class="title">提示</view>
				<view class="conte">
					确认要删除全部历史记录吗?
				</view>
				<view class="modal-btn-box is-flex">
					<view class="btn" @click="show = false">取消</view>
					<view class="btn btn2" @click="problemConfirm">确定</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:['AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?','葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办'],
				tabList:[],
				list2:['AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?','葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办'],
				title:'提示',
				show:false,
				content:'确认要删除全部历史记录吗?',
				keywords:'',
				showSearchList:false,
				searchList:[],
				tabId:4,
				cacheList:[]
			}
			
		},
		onShow() {
			this.init();
		},
		methods:{
			init(){
				let json = uni.getStorageSync('searchListCache');
			
				if (json == undefined || json == '') {
					
				} else {
				    this.cacheList = JSON.parse(json);
				   
				}
				
				this.getIssuesCategory();
							
			},
			getIssuesCategory(){
				let self = this;
				self._get('issues.issues/getIssuesCategory', {}, function(res) {
					self.tabList = res.data.tabList;
					
				});
			},
			onInput(e){
				let self = this;
				this.keywords = e.detail.value;
				if(this.keywords.length > 0){
					self.showSearchList = true;
					
					self._get('issues.issues/getSearchTitle', {keywords:self.keywords}, function(res) {
						self.searchList = res.data.list;
						
					});
					
				} else {
					self.showSearchList = false;
				}
			},
			click(e){
				this.tabId = e.category_id;
			},
			touchDelete(){
				this.show = true
			},
			problemConfirm(){
				this.show = false
				uni.removeStorageSync('searchListCache');
				this.cacheList = [];
			},
			touchSearch(item){
				let self = this;
				self.keywords = item.article_title;
				self.addToCache(item.article_title);
				self.showSearchList = false;
				uni.navigateTo({
					url:'/pages/search/answer?keywords=' + item.article_title
				})
				// uni.navigateTo({
				// 	url:'/pages/search/search'
				// })
			},
			doSearch(){
				let self = this;
				self.addToCache(self.keywords);
				self.showSearchList = false;
				uni.navigateTo({
					url:'/pages/search/answer?keywords=' +self.keywords
				})
			},
			touchDetail(){
				
			},
			addToCache (articleTitle) {
			    let json = uni.getStorageSync('searchListCache');
			    let commonProcess = [];
			    let proc = {
			        article_title: articleTitle,
			    }
			    if (json == undefined || json == '') {
			        commonProcess.unshift(proc);
			    } else {
			        commonProcess = JSON.parse(json);
			        commonProcess.forEach((item, index) => {
						if (item.article_title == articleTitle) {
							commonProcess.splice(index, 1);
						}
			        })
			
			        commonProcess.unshift(proc);
					
			    }
				this.cacheList = commonProcess;
			    uni.setStorageSync('searchListCache', JSON.stringify(commonProcess));
			
			},
			delCacheList(index1){
				let json = uni.getStorageSync('searchListCache');
				console.log(index1);
				let commonProcess = [];
				commonProcess = JSON.parse(json);
				commonProcess.splice(index1, 1);
				this.cacheList = commonProcess;
				uni.setStorageSync('searchListCache', JSON.stringify(commonProcess));
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-conte {
		padding: 40upx;
	}
	.title-h2 .icon {
		width: 120upx;
		height: 86upx;
	}
	// 搜索框
	.search-view-box {
		width: 100%;
		z-index: 10;
		margin-top: 16upx;
	}
	.icon-yy {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-bottom: -20upx;
		z-index: 12;
		width: 87upx;
	}
	.search-top-box {
		width: 169upx;
		height: 69upx;
		background: #232DA7;
		border-radius: 13upx 13upx 0upx 0upx;
		justify-content: center;
		font-size: 35upx;
		color: #fff;
		line-height: 50upx;
	}
	.search-top-box .iconfont {
		font-size: 50upx;
		margin-right: 5upx;
	}
	.search-conte-box {
		height: 106upx;
		border-radius: 0rpx 13rpx 13rpx 13rpx;
		border: 4rpx solid #232DA7;
		padding: 0 34upx;
		background-color: #fff;
	}
	.search-conte-box .iconfont {
		font-size: 55upx;
	}
	.search-conte-box .input {
		flex: 1;
		padding-left: 30upx;
	}
	.history-search-box {
		margin-top: 50upx;
	}
	.title-view-box {
		padding: 0 35upx 0 40upx;
	}
	.title-view-box .title {
		width: 162upx;
		height: 58upx;
	}
	.title-view-box .delete {
		width: 30upx;
		height: 30upx;
	}
	.history-list-box {
		margin-top: 16upx;
		padding: 20upx 40upx;
		background-color: #fff;
		border-radius: 13upx;
		box-shadow: 0rpx 5rpx 20rpx 1rpx rgba(0,26,112,0.08);
		margin-bottom: 50upx;
	}
	.history-item {
		font-size: 27upx;
		color: #333;
		padding: 10upx 0;
	}
	.history-item  .close {
		width: 22upx;
		height: 22upx;
		margin-left: 20upx;
	}
	.ph-view-box {
		margin-top: 16upx;
		padding: 20upx 40upx;
		background-color: #fff;
		border-radius: 13upx;
		box-shadow: 0rpx 5rpx 20rpx 1rpx rgba(0,26,112,0.08);
		margin-bottom: 50upx;
	}
	/deep/ .ph-view-box .u-tabs__wrapper__nav__item {
		padding: 0 12upx;
		width: 25%;
	}
	.ph-list-box {
		padding: 15upx 0;
		margin-top: 15upx;
	}
	.ph-item {
		padding: 10upx 0;
		align-items: initial;
		justify-content: flex-start;
		font-size: 28upx;
		line-height: 50upx;
	}
	.ph-item .t-icon {
		width: 30upx;
		height: 30upx;
		margin-right: 24upx;
		margin-top: 10upx;
	}
	.ph-item .num {
		width: 54upx;
		text-align: left;
		font-size: 28upx;
	}
	.modal-box {
		text-align: center;
		padding:0upx 20upx;
		width: 100%;
	}
	.modal-box .title {
		line-height: 60upx;
		font-size: 54upx;
		color: #001353;
		font-weight: bold;
	}
	.modal-box .conte {
		margin-top: 35upx;
		font-size: 32upx;
		color: #333333;
		text-align: center;
	}
	.modal-btn-box {
		margin-top: 50upx;
		padding: 0 20upx;
	}
	.modal-btn-box .btn {
		width: 173upx;
		line-height: 80upx;
		background: #EAEAEA;
		border-radius: 13upx;
		font-size: 32upx;
		color: #333333;
	}
	.modal-btn-box .btn2 {
		background-color: #232DA7;
		color: #fff;
	}
	.search-btn {
		width: 160rpx;
		height: 67rpx;
		background: #232DA7;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 67rpx;
		border-radius: 10rpx;
	}
	.search-list {
		margin-top: 30upx;
	}
	.search-item {
		justify-content: flex-start;
		padding: 30upx 0;
		border-bottom: 1upx solid #EDEDED;
		
	}
	.search-item .conte {
		flex: 1;
		font-size: 32upx;
		color: #333;
	}
	.search-item .iconfont {
		font-size: 50upx;
		margin-right: 5upx;
	}
	.search-item .icon-sousuo-01 {
		margin-right: 30upx;
	}
	/deep/ .u-loading-icon {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>